<template>
  <view v-if="info.id" class="container">
		<view class="course-info flex-wrap">
			<view class="course-pic">
				<image :src="info.imghome" mode="aspectFit"></image>
			</view>
			<view class="course-cont">
				<view class="course-name">{{ info.name }}</view>
				<view class="course-desc">學費：<text>{{ info.price }}</text></view>
				<view class="course-desc">材料費：<text>{{ info.materialprice }}</text></view>
				<view class="course-collect flex-align" @click="handleCollect">
					<image :src="$getOSSImg(isfavorites ? 'collect_sel_icon.png' : 'collect_icon.png')" mode="aspectFill"></image>
					<text>收藏</text>
				</view>
			</view>
		</view>
		<view v-if="(info.zizhutype && info.zizhutext) || (info.xianjintype && info.xianjintext)" class="tips-box flex-align">
			<image :src="$getOSSImg('info_icon.png')" mode="aspectFill"></image>
			<text>
				{{ info.zizhutype ? info.zizhutext : '' }}
				<block v-if="info.xianjintype && info.xianjintext && info.zizhutype && info.zizhutext">/</block>
				{{ info.xianjintype ? info.xianjintext : '' }}
			</text>
		</view>
		<view class="detail-box">
			<block v-if="info.btCourseClassNav.length">
				<view class="detail-title">班級列表</view>
				<view class="table-box">
					<view class="table-head flex-align">
						<view class="table-item flex-center">班級</view>
						<view class="table-item flex-center">上課日</view>
						<view class="table-item flex-center">上課時間</view>
						<view class="table-item flex-center">開課時間</view>
					</view>
					<view v-for="item in info.btCourseClassNav" :key="item.id" class="table-body flex-align">
						<view class="table-item flex-center">{{ item.className || '' }}</view>
						<view class="table-item flex-center">
							<block v-if="item.weeks.length">
								<view v-for="(v, k) in item.weeks" :key="k">{{ v }}</view>
							</block>
						</view>
						<view class="table-item flex-center">
							<block v-if="item.startTime">
								{{ item.startTime }}-{{ item.endTime }}
							</block>
						</view>
						<view class="table-item flex-center">{{ item.startDate || '' }}</view>
					</view>
				</view>
			</block>
			<block v-if="info.classAddress">
				<view class="detail-title">上課地點</view>
				<view class="detail-address flex-align">
					<image :src="$getOSSImg('location_icon.png')" mode="aspectFill"></image>
					<u-parse :content="info.classAddress"></u-parse>
				</view>
			</block>
			<block v-if="info.introduce">
				<view class="detail-title">課程介紹</view>
				<view class="detail-desc">
					<u-parse :content="info.introduce"></u-parse>
				</view>
			</block>
			<block v-if="info.people">
				<view class="detail-title">適合人群</view>
				<view class="detail-desc">
					<u-parse :content="info.people"></u-parse>
				</view>
			</block>
			<block v-if="info.note">
				<view class="detail-title">課程重點</view>
				<view class="detail-desc">
					<u-parse :content="info.note"></u-parse>
				</view>
			</block>
			<block v-if="info.summary">
				<view class="detail-title">內容大綱</view>
				<view class="detail-desc">
					<u-parse :content="info.summary"></u-parse>
				</view>
			</block>
		</view>
		<view class="fixed-footer">
			<view class="footer-box flex-space-b">
				<view class="ft-cont flex-align">
					<view class="ft-btn flex-center" @click="servicePop.show = true">
						<image :src="$getOSSImg('service_icon.png')" mode="aspectFill"></image>
						<text>聯繫客服</text>
					</view>
					<view class="ft-btn flex-center" @click="getActivity">
						<image :src="$getOSSImg('gift_icon.png')" mode="aspectFill"></image>
						<text>砍價活動</text>
					</view>
				</view>
				<view class="ft-submit flex-center" @click="handleReserved">立即留位</view>
			</view>
		</view>
		
		<u-popup :show="servicePop.show" :safeAreaInsetBottom="false" mode="center" round="16rpx" @close="servicePop.show = false">
			<view class="service-pop">
				<view class="qrcode flex-center">
					<image :src="servicePop.qrcode" mode="aspectFit"></image>
				</view>
				<view class="desc">
					<view>微信：{{ servicePop.contact }}</view>
					<view>客服辦公時間：{{ servicePop.time }}</view>
				</view>
				<view class="btn" @click="servicePop.show = false">確認</view>
			</view>
		</u-popup>
		<!-- 登录弹窗 -->
		<login-pop @update="getInfo" />
		<!-- 协议弹窗 -->
		<protocol-pop />
	</view>
</template>

<script>
	import { getBtCourse, addBtCourseActivity } from '@/api/course'
	import { getSystemConfig } from '@/api/home'
	import { addfavorites, cancelfavorites } from '@/api/user'
  export default {
		data() {
			return {
				id: 0,
				info: {},
				isfavorites: false,
				servicePop: {
					show: false,
					contact: '',
					time: '',
					qrcode: ''
				},
				userActivityId: 0
			}
		},
		onLoad(o) {
			this.id = o.id
			this.getInfo()
			this.getConfig()
		},
		onShow() {
			if (this.info.id) {
				this.getInfo()
			}
		},
		methods: {
			async getInfo() {
				const { data } = await getBtCourse({ Id: this.id })
				data.coursedetail.btCourseClassNav.map(v => {
					v.weeks =  v.weeks && v.weeks.split(',')
				})
				this.info = data.coursedetail
				this.isfavorites = data.isfavorites
				this.userActivityId = data.userActivityId
			},
			async getConfig() {
				const { data } = await getSystemConfig()
				this.servicePop = {
					show: false,
					contact: data.find(v => v.configKey === 'bd.service.wechat').configValue,
					time: data.find(v => v.configKey === 'bd.service.officehours').configValue,
					qrcode: data.find(v => v.configKey === 'bd.service.photo').configValue
				}
			},
			async getActivity() {
				await this.checkLogin()
				if (this.userActivityId > 0) {
					this.$navigator(`/pages/course/help?id=${this.userActivityId}`)
				} else {
					const { data } = await addBtCourseActivity({ courseId: this.info.id })
					this.$navigator(`/pages/course/help?id=${data.id}`)
				}
			},
			async handleCollect() {
				await this.checkLogin()
				if (this.isfavorites) {
					cancelfavorites({ courseid: this.info.id })
					this.isfavorites = false
				} else {
					addfavorites({ courseid: this.info.id })
					this.isfavorites = true
				}
			},
			async handleReserved() {
				await this.checkLogin()
				this.$navigator(`/pages/course/reserved?id=${this.info.id}`)
			}
		},
		async onShareTimeline() {
			return {
				title: '柏圖教育',
				path: `/pages/course/detail?id=${this.id}`
			}
		},
		async onShareAppMessage() {
			return {
				title: '柏圖教育',
				path: `/pages/course/detail?id=${this.id}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F9F9F9;
		padding-bottom: calc(148rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
	.course-info {
		background-color: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
		.course-pic {
			width: 296rpx;
			height: 214rpx;
			border-radius: 8rpx;
			margin-right: 32rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.course-cont {
			flex: 1;
			.course-name {
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 38rpx;
			}
			.course-desc {
				margin-top: 10rpx;
				color: #333333;
				font-size: 28rpx;
				text {
					color: #F22520;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
			.course-collect {
				margin-top: 30rpx;
				color: #333;
				font-size: 28rpx;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
	.tips-box {
		margin: 20rpx 0;
		background-color: #ECF5FF;
		padding: 0 20rpx;
		height: 76rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}
		text {
			font-size: 26rpx;
			color: #3C9CFF;
		}
	}
	.detail-box {
		padding: 0 20rpx 30rpx;
		background-color: #fff;
		.detail-title {
			color: #E9930A;
			font-size: 30rpx;
			padding: 32rpx 0 20rpx;
		}
		.table-box {
			border: 1px solid #EEEEEE;
			box-sizing: border-box;
			.table-item {
				flex-direction: column;
				color: #303133;
				font-size: 30rpx;
				flex: 1 1 auto;
				box-sizing: border-box;
				padding: 20rpx 0;
				&:nth-child(1) {
					width: 142rpx;
					padding: 20rpx 10rpx;
				}
				&:nth-child(2) {
					width: 158rpx;
				}
				&:nth-child(3), &:nth-child(4) {
					width: 197rpx;
				}
				&:nth-child(4) {
					padding-right: 6rpx;
				}
			}
			.table-head {
				height: 80rpx;
			}
			.table-body {
				border-top: 1px solid #EEEEEE;
			}
		}
		.detail-address {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
			color: #303133;
			font-size: 30rpx;
		}
		.detail-desc {
			color: #303133;
			font-size: 30rpx;
			line-height: 40rpx;
		}
	}
	.fixed-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		border-top: 2rpx solid #eee;
		box-sizing: border-box;
		.footer-box {
			.ft-cont {
				.ft-btn {
					flex-direction: column;
					margin: 0 50rpx 0 0;
					line-height: 1;
					padding: 0;
					background-color: transparent;
					&::after {
						display: none;
					}
					image {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 8rpx;
					}
					text {
						color: #909193;
						font-size: 28rpx;
					}
				}
			}
			.ft-submit {
				width: 374rpx;
				height: 88rpx;
				background: #E9930A;
				border-radius: 6rpx;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
	.service-pop {
		width: 600rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.qrcode {
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
		.desc {
			padding: 24rpx 0;
			color: #303133;
			font-size: 30rpx;
			line-height: 40rpx;
		}
		.btn {
			text-align: center;
			width: 279rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #E9930A;
			border-radius: 6rpx;
			background-color: #E9930A;
			color: #fff;
			font-size: 30rpx;
			margin: 0 auto;
		}
	}
</style>
